<html dir="rtl">
<head>
<style>
@page {
  size: 300px 1400px;
}
html * {
  font-family: 'TestFont', 'arabic', sans-serif;
}
body {
  border: 1px solid red;
}
</style>
</head>
   <body dir="auto">
   <!-- forced rtl -->
   <ol dir="rtl" class="rtl">
      <li>السيطرة</li>
      <li>السيطرة</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ol>

   <!-- forced ltr -->
   <ol dir="ltr">
      <li>السيطرة</li>
      <li>السيطرة</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ol>

    <!-- auto ltr -->
    <ol>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li>
      <li>eight</li>
      <li>nine</li>
      <li>ten</li>
      <li>eleven</li>
      <li>twelve</li>
    </ol>

   </body>
</html>
